<template>
	<view>
		<view class="name">
			姓名
			<input style="text-indent: 1rem;margin-left: 30rpx;" v-model="from.name" type="text" placeholder="请输入姓名">
		</view>
		<view class="name">
			身份证
			<input style="text-indent: 1rem;margin-left: 30rpx;" v-model="from.id_card" type="text"
				placeholder="请输入身份证号">
		</view>
		<view class="name">
			手机号
			<input style="text-indent: 1rem;margin-left: 30rpx;" v-model="from.phone" type="text" placeholder="请输入手机号">
		</view>
		<view class="name">
			<view class="uni-title uni-common-pl">现居地址</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" mode="region" :value="index" :range="array">
							<view class="uni-input">{{array[0]}}{{array[1]}}{{array[2]}}</view>
						</picker>
					</view>
				</view>

			</view>
		</view>
		<view class="name">
			现居详细地址
			<input style="text-indent: 1rem;margin-left: 30rpx;" v-model="from.de_address" type="text"
				placeholder="请输入现居详细地址">
		</view>
		<view class="name">
			<view class="uni-title uni-common-pl">疫苗人群分类</view>
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker @change="selector_dataChange" :value="index1" :range="selector_data">
							<view style="font-size: 28rpx;" class="uni-input">{{selector_data[index1]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间 -->
		<view class="foot">
			<!-- 地址 -->
			<view class="dz" v-for="item,index in vaccineList" :key="index">
				<view class="dz_item">{{item.Hospital}}</view>
				<view class="dz_km">{{item.address}}</view>
				<view class="dz_con">
					<view class="dz_con_kx">{{item.company[0]}}</view>
					<view class="dz_con_sw">{{item.company[1]}}</view>
				</view>
			</view>
			<!-- 周三 -->
			<view class="zs" v-for="item,index in vaccineList" :key="index">
				<view class="zs_item" @click="handlerq(item.week[0])">
					<view class="">{{item.week[0].day}}</view>
					<view class="">{{item.week[0].date}}</view>
					<view class="">{{item.week[0].Have}}</view>
				</view>
			</view>

			<view class="xw" v-for="(item,i) in vaccineList[0].lasting" :key="i">
				<view class="xwsd">{{item.period}}</view>
				<div class="xw_items">
					<div v-for="it,int in item.time" :key="int" class="xw_ele">
						<div class="xw_item" :class="{active:aa === it.start_time}" @click=" addVaccines(it,item)">
							<p>{{it.start_time}} -- {{it.end_time}}</p>
							<p>剩余{{it.over}}</p>
						</div>
					</div>
				</div>
			</view>

			<view class="hz">

			</view>

		</view>
		<!-- 提交 -->
		<view class="foot_tj">
			<u-button type="primary" size="large" :plain="true" text="取消"></u-button>
			<u-button type="primary" size="large" @click="addVaccine" :plain="true" text="授权"></u-button>
		</view>
	</view>

</template>

<script>
	import {
		getVaccine,
		addVaccineMake
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				aa: '',
				from: {
					name: "",
					id_card: '',
					phone: '',
					de_address: '',
					crowd_sort: "",
					address: "",
					period: '',
					reserve_time: '',
					when: '',
					date: ''
				},
				array: ['北京市', '北京市', '东城区'],
				index: 0,
				index1: 0,
				selector_data: ['医疗卫生人员', '卫生系统内工作的其他人员', '因公出国人员',
					'对外劳务派遣人员', '留学生', '因私出国人员', '海关边检人员', '公安系统,消防人员',
					'党政机关,事业单位人员', '社区工作者', '教育工作者', '小学和中学学生', '其他人员'
				],
				vaccineList: []
			};
		},
		methods: {
			// 获取日期
			handlerq(item) {
				console.log(item);
				this.from.date = item.date
			},
			// 获取时段
			addVaccines(ele, item) {
				console.log(ele, item);
				this.aa = ele.start_time
				this.from.period = item.period
				this.from.reserve_time = ele.start_time - ele.end_time
				this.from.when = ele.when
			},
			// 现住地址
			selector_dataChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.index1 = e.detail.value
				this.from.crowd_sort = this.selector_data[this.index1]
			},
			// 现居地址
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.array = e.detail.value
				this.from.address = e.detail.value.join('')
			},
			// 请求新冠疫苗
			getVaccineList() {
				getVaccine().then(res => {
					console.log(84, res);
					this.vaccineList = res.data.data
					console.log(this.vaccineList);
				})
			},
			// 授权
			// handleEmpower() {
			// 	let token = uni.getStorageSync('token')
			// 	if (!token) {
			// 		uni.navigateTo({
			// 			url: '/pages/empower/empower'
			// 		})
			// 	}
			// },
			// 新冠疫苗提交预约
			addVaccine() {
				addVaccineMake(this.from).then(res => {
					console.log(170, res);
					if (res.data.msg == '提交成功') {
						uni.redirectTo({
							url: '/pages/index/index'
						})
						return
					}

				})
			},
		},
		created() {
			this.getVaccineList()
		}
	}
</script>

<style lang="scss">
	.name {
		width: 750rpx;
		display: flex;
		height: 100rpx;
		align-items: center;
		border-bottom: 2px solid #ddd;
		position: relative;
	}

	.uni-list-cell {
		display: flex;
		width: 300rpx;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		right: 20rpx;
		bottom: 28rpx;
	}

	.dz {
		width: 750rpx;
		margin: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.dz_item {
		font-size: 40rpx;
	}

	.dz_km {
		margin: 10rpx;
	}

	.dz_con {
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.dz_con_kx {
		margin: 0 10rpx;
	}

	.zs_item {
		width: 120rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		background: #ddd;
		border-radius: 16rpx;
	}

	.xw {
		width: 750rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.xwsd {
		font-size: 48rpx;
		font-weight: 600;
		margin: 20rpx 0;
	}

	.xw_ele {
		display: flex;
		height: 140rpx;
	}

	.xw_item {
		background: #ddd;
		border-radius: 20rpx;
		margin-right: 40rpx;
		padding: 20rpx;
	}

	.xw_items {
		display: flex;
	}

	.hz {
		width: 750rpx;
		height: 200rpx;
	}

	.foot {
		height: 400px;
		// margin-bottom: 100rpx;
	}

	.foot_tj {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.active {
		background: skyblue;
	}
</style>